<!DOCTYPE html>
<html>
<head>
  <title>Form Elements Visibility Tests</title>
  <link rel="stylesheet" href="./style.css">
  <script src="./ux.js"></script>
</head>
<body>
  <h1>Form Elements Visibility Tests</h1>
  
  <div class="test-section" cy-section="select-and-option-elements" cy-has-conflicts="true">
    <h3>Select and Option Elements</h3>
    <select class="testCase" cy-expect="visible" id="visible-select">
      <option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option" cy-label="first option">Visible Option</option>
      <option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option-2">Another Visible Option</option>
    </select>
    
    <select class="testCase" cy-expect="hidden" id="hidden-select" style="display: none;">
      <option class="testCase" cy-expect="hidden" id="hidden-option">Hidden Option</option>
    </select>
  </div>

  <div class="test-section" cy-section="optgroup-elements" cy-has-conflicts="true">
    <h3>Optgroup Elements</h3>
    <select class="testCase" cy-expect="visible" id="select-with-optgroup" cy-label="select with optgroup">
      <optgroup class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-optgroup" cy-label="Visible opt Group">
        <option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 1</option>
        <option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 2</option>
      </optgroup>
    </select>
    
    <select class="testCase" cy-expect="hidden" id="hidden-select-with-optgroup" style="display: none;">
      <optgroup class="testCase" cy-expect="hidden" id="hidden-optgroup" label="Hidden Group">
        <option class="testCase" cy-expect="hidden">Hidden Option 1</option>
        <option class="testCase" cy-expect="hidden">Hidden Option 2</option>
      </optgroup>
    </select>
  </div>

  <div class="test-section" cy-section="options-outside-select">
    <h3>Options Outside Select</h3>
    <div class="testCase" cy-expect="hidden" style="display: none;">
      <option class="testCase" cy-expect="hidden" id="detached-option">Detached Option</option>
    </div>
    <div class="testCase" cy-expect="visible">
      <option class="testCase" cy-expect="visible" id="standalone-option">Standalone Option</option>
    </div>
  </div>

  <div class="test-section" cy-section="hidden-options-within-visible-select" cy-has-conflicts="true">
    <h3>Hidden Options Within Visible Select</h3>
    <select class="testCase" cy-expect="visible" id="select-with-hidden-option">
      <option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-option-in-select">Visible Option</option>
      <option class="testCase" cy-expect="hidden" id="hidden-option-in-select" style="display: none;">Hidden Option</option>
    </select>
  </div>

  <div class="test-section" cy-section="input-elements">
    <h3>Input Elements</h3>
    <input class="testCase" cy-expect="hidden" id="input-hidden" type="hidden" value="hidden input">
    <input class="testCase" cy-expect="visible" id="input-visible" type="text" value="visible input">
    <input class="testCase" cy-expect="hidden" id="input-display-none" type="text" value="display none input" style="display: none;">
  </div>
</body>
</html>
